<script setup lang="ts">
import { LengthUnit, meter2strWithUnit } from '@/widgets'
import { MapItemLink } from '@/map-item'
import { waypointMapItem } from '../../waypoint'
import { airportMapItem } from '../../airport'
import type { Routing } from '../types'
import { getRoutingInfo } from './routing-info'

const props = defineProps<{
  type: string
  item: Routing
}>()

const info = getRoutingInfo(props.item)
const lastSeg = info.segmentList[info.segmentList.length - 1]

const lengthFn = (m: number) => meter2strWithUnit(m, LengthUnit.KM, 1)
</script>
<template>
  <div class="routing-info">
    <div class="pane-block">
      <div class="row">
        <div class="col-5em">飞行路线</div>
        <div class="col">{{ info.id }}</div>
      </div>
      <div class="row">
        <div class="col-5em">起飞机场</div>
        <MapItemLink
          v-if="info.departureAirport"
          class="col"
          :txt="info.departureAirport"
          :item="airportMapItem"
        />
        <div v-else>-</div>
      </div>
      <div class="row">
        <div class="col-5em">落地机场</div>
        <MapItemLink
          v-if="info.arrivalAirport"
          class="col"
          :txt="info.arrivalAirport"
          :item="airportMapItem"
        />
        <div v-else>-</div>
      </div>
      <div class="row">
        <div class="col-5em">长度</div>
        <div class="col">{{ lengthFn(info.length) }}</div>
      </div>
      <!-- <hr /> -->
      <div class="map-block-header">航段[{{ info.segmentList.length + 1 }}]</div>
      <div class="row">
        <div class="col-3em">No</div>
        <div class="col-6em">航路点</div>
        <div class="col-6em">长度</div>
        <div class="col-4em">方向</div>
        <div class="col-2em">航路</div>
      </div>
      <div class="row seg-row" v-for="(seg, idx) in info.segmentList" :key="idx">
        <div class="col-3em">{{ idx + 1 }}</div>
        <MapItemLink class="col-6em" :txt="seg.start" :item="waypointMapItem" />
        <div class="col-6em">{{ lengthFn(seg.length) }}</div>
        <div class="col-4em">{{ Math.floor(seg.course) }}°</div>
        <div class="col-2em">{{ seg.atsRoute || '' }}</div>
      </div>
      <div class="row seg-row">
        <div class="col-3em">{{ info.segmentList.length + 1 }}</div>
        <MapItemLink class="col-6em" :txt="lastSeg.end" :item="waypointMapItem" />
        <div class="col-6em">-</div>
        <div class="col-6em">-</div>
        <div class="col-2em">-</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.routing-info {
  .seg-row:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
</style>
